<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>BackGrid Complete example (Recommended!)</title>

<link rel="stylesheet" href="../../lib/bootstrap/bootstrap.min.css">
<link rel="stylesheet" href="../../lib/backgrid/backgrid.css">
<link rel="stylesheet" href="../../lib/backgrid/backgrid-select-all.css">
<link rel="stylesheet" href="../../lib/backgrid/backgrid-paginator.css">
<link rel="stylesheet" href="../../lib/backgrid/backgrid-filter.css">
<link rel="stylesheet" href="../../css/styles.css" />
<link rel="stylesheet" href="../../css/layout.css" />

</head>
<body>
	<div class="container-fluid">
		<div class="row-fluid">
			<div id="sidebar" class="span2 container">side bar content here</div>
			<div id="winetile" class="span10 container">
				Object Tile Area for Listing and Addnew/Editing
			</div>
		</div>
	</div>

	<script type="text/template" id="tpl_winetile">
	<div id="winetile">
		<div class="page-header">
			<h1 align="center">
				Backbone Complete Example with Filters and Paginator <small>
					Winestore Example </small>
			</h1>
		</div>
		<div id="objecteditor">object editor
			here. If you see this, it means the object list view or object item
			view are not displayed successfully!</div>
	</div>
	</script>

	<script type="text/template" id="tpl_itemlist">
	<div id="itemlist">
		<a href="#wines/new" id="addnew" class="btn btn-success">Add</a>
		<!-- 
		<a href="#wines/deleteselected" id="deleteselected" class="btn btn-danger">Delete Selected</a>
		-->
		<a href="#" id="deleteselected" class="btn btn-danger">Delete Selected</a>
		<div id="backgrid" class="backgrid-container">If you see this, it means the backgrid is not displayed properly</div>
	</div>
	</script>
	
	<script type="text/template" id="tpl_itemdetail">
	<h2 class="page-header text-center">Wine Detail Edit</h2>
	<form role="form" class="form-horizontal contract-form">
		<div class="form-group">
			<label class="col-sm-4 control-label">Id:</label>
			<div class="col-sm-6">
				<input id="wineId" name="id" type="text" value="<%= id %>"
					class="form-control contact-name-input" disabled />
			</div>
		</div>
		<div class="form-group">
			<label class="col-sm-4 control-label">Name:</label>
			<div class="col-sm-6">
				<input type="text" id="name" name="name" value="<%= name %>"
					class="form-control contact-name-input" required />
			</div>
		</div>
		<div class="form-group">
			<label class="col-sm-4 control-label">Grapes:</label>
			<div class="col-sm-6">
				<input type="text" id="grapes" name="grapes"
					class="form-control contact-name-input" value="<%= grapes %>" />
			</div>
		</div>
		<div class="form-group">
			<label class="col-sm-4 control-label">Country:</label>
			<div class="col-sm-6">
				<input type="text" id="country" name="country"
					class="form-control contact-name-input" value="<%= country %>" />
			</div>
		</div>
		<div class="form-group">
			<label class="col-sm-4 control-label">Region:</label>
			<div class="col-sm-6">
				<input type="text" id="region" name="region" class="form-control contact-name-input" value="<%= region %>" />
			</div>
		</div>
		<div class="form-group">
			<label class="col-sm-4 control-label">Year:</label>
			<div class="col-sm-6">
				<input type="text" id="year" name="year"
					class="form-control contact-name-input" value="<%= year %>" />
			</div>
		</div>
	
		<div class="form-group">
			<label class="col-sm-4 control-label">Notes:</label>
			<div class="col-sm-6">
				<textarea id="description" name="description"
					class="form-control contact-name-input"><%= description %></textarea>
			</div>
		</div>
		<div class="form-group">
			<div class="col-sm-offset-4 col-sm-3">
				<button type="submit" class="btn btn-outline btn-lg btn-block save">Submit</button>
			</div>
			<div class="col-sm-3">
				<button class="btn btn-outline btn-lg btn-block cancel">Cancel</button>
			</div>
		</div
	</form>
	</script>


	<script src="../../lib/jquery-1.11.0.js"></script>
    <script src="../../lib/bootstrap/bootstrap.min.js"></script>
	<script src="../../lib/backbone/underscore.js"></script>
	<script src="../../lib/backbone/backbone.js"></script>
	<script src="../../lib/backgrid/backbone-pageable.js"></script>
	<script src="../../lib/backgrid/backgrid.js"></script>
	<script src="../../lib/backgrid/backgrid-select-all.js"></script>
	<script src="../../lib/backgrid/backgrid-paginator.js"></script>
	<script src="../../lib/backgrid/backgrid-filter.js"></script>

	<script src="fdbviewer-v3.js"></script>

</body>
</html>
